<template>
	<view class="home">

		<view class='my-account'>
			<view class='wrapper'>
				<view class='header'>
					<view class='headerCon'>
						<view class='account acea-row row-top row-between'>
							<view class='assets'>
								<view>我的代理金</view>
							</view>

						</view>
						<view class="middle">
							<view class='money'>{{list.nowMoney || 0}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>


		<view class="card_box">



			<view class="list" v-for="item in 4">

				<view class="list_card">
					<view class="img">

					</view>
					<view class="">
						19:13:47
					</view>
					<view class="list_txt">
						<view class="">
							代理金充值
						</view>
						<view class="numPic">
							<button type="primary" size="mini" @click="topUp">兑换</button>
						</view>
					</view>
				</view>
			</view>
		</view>



		<view class="bg" v-if="isShowCard"></view>
		<view class="showCard" v-if="isShowCard">
			<u-card :title="textChange==1?'确认兑换':'兑换成功'" style="font-weight: 700;font-size: 36px !important">
				<view class="" slot="body">

					<view class="u-body-item u-flex  u-border-bottom  u-p-t-0">

						<view class="txt_flex">

							<view class="u-body-item-title u-line-2">兑换成功后无法撤回,是否确认兑换</view>


						</view>

					</view>

				</view>

				<view class="foot_btn" slot="foot">
					<button @click="back" type="default" style="border: 1px solid #ccc;" class="btn_confirm">返回</button>
					<button v-if="textChange==1" type="primary" class="btn_confirm" @click="confirm">确定</button>
					<button v-else type="primary" class="btn_confirm" @click="goLook">去查看</button>
				</view>
			</u-card>
		</view>
		<home></home>
	</view>


</template>

<script>
	import {
		getProductHot
	} from '@/api/store.js';
	import {
		openRechargeSubscribe
	} from '@/utils/SubscribeMessage.js';
	import {
		userActivity,
		getuserDalance
	} from '@/api/user.js';
	import { getNowMoney  } from '@/api/new.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	import recommend from '@/components/recommend/index';
	// #ifdef MP
	import authorize from '@/components/Authorize';
	// #endif
	import home from '@/components/home';
	export default {
		components: {
			recommend,
			// #ifdef MP
			authorize,
			// #endif
			home
		},
		data() {
			return {
				hostProduct: [],
				isClose: false,
				activity: {},
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				hotScroll: false,
				statistics: {},
				hotPage: 1,
				hotLimit: 10,
				type: "all",
				isShowCard: false,
				recharge: 2,
				textChange: 1,
				list:{}
			};
		},
		onShow(){
			getNowMoney().then(res=>{
				this.list = res.data
				console.log(res,'res');
			})
		},
		onLoad() {
			
		},
		methods: {
			confirm() {
				this.textChange = 2

			},
			//去查看
			goLook() {
				console.log('99');
				uni.navigateTo({
					url: '/pages/users/exchangeShop/myShop'
				})
			},
			topUp() {

				this.isShowCard = true

			},

			//兑换
			exchange(url) {
				uni.navigateTo({
					url: url
				})
			},
			back() {
				this.isShowCard = false

			},
			onReachBottom() {
				this.get_host_product();
			}
		}
	}
</script>

<style scoped lang="scss">
	.home {
		position: relative;

		.showCard {
			width: 100%;
			height: 300px;
			position: absolute;
			top: 30%;
			left: 50%;
			transform: translate(-50%, 0%);
			z-index: 2;
			
		}
		.foot_btn {
			display: flex;
			justify-content: space-around;
		
			.btn_confirm {
				width: 30%;
				height: 40px;
				line-height: 40px;
			}
		}
		
		.prompt {
			font-size: 16px;
		}

		.bg {
			position: absolute;
			top: 0;
			width: 100%;
			height: 100vh;
			background: #333;
			z-index: 1;
		}

		
		

		.u-card-wrap {
			background-color: $u-bg-color;
			padding: 1px;
		}

		.u-row-between {
			justify-content: center
		}

		.u-line-2 {
			font-size: 32rpx;
			color: #333;
			font-weight: bold;
		}

		.tit {
			font-size: 14px;
			color: #333;
		}

		::v-deep .u-flex {
			flex-direction: column;
			justify-content: center
		}

		::v-deep .u-card__head--left__title span {
			font-size: 20px
		}

		.txt_flex {
			width: 100%;
			display: flex;
			justify-content: center;
			padding: 20px 0 45px;
		}

		.u-body-item image {
			width: 140rpx;
			flex: 0 0 140rpx;
			height: 140rpx;
			border-radius: 8rpx;
			margin-left: 12rpx;
		}

		//  ::v-deep uni-button{
		// 	background-color:none !important
		// }
	}


	.bill-details .nav {
		background-color: #fff;
		height: 90rpx;
		width: 100%;
		line-height: 90rpx;
	}

	.bill-details .nav .item {
		flex: 1;
		text-align: center;
		font-size: 30rpx;
		color: #282828;
	}

	.bill-details .nav .item.on {
		color: $theme-color;
		border-bottom: 3rpx solid $theme-color;
	}

	.my-account .wrapper {
		background-color: #fff;
		padding: 32rpx 0 15rpx 0;
		margin-bottom: 14rpx;
	}

	.card_box {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		gap: 22rpx;
		justify-content: center;
	}

	.list {
		background-color: #fff;
		// margin: 10px;
		padding: 15px;
		display: flex;

		.list_card {
			width: 300rpx;

			.img {
				height: 100px;
				width: 100%;
				background-color: aqua;
				margin-bottom: 8px;
			}

		}

		.list_txt {
			display: flex;
			justify-content: space-between;
			// padding: 10px 0 0;
			align-items: center;

		}
	}

	.my-account .wrapper .header {
		width: 690rpx;
		// height: 330rpx;
		background-image: linear-gradient(to right, #f33b2b 0%, #f36053 100%);
		border-radius: 16rpx;
		margin: 0 auto;
		box-sizing: border-box;
		color: rgba(255, 255, 255, 0.6);
		font-size: 24rpx;
	}

	.my-account .wrapper .header .headerCon {
		background-image: url('');
		background-repeat: no-repeat;
		background-size: 100%;
		height: 100%;
		width: 100%;
		padding: 36rpx 0 29rpx 0;
		box-sizing: border-box;
	}

	.my-account .wrapper .header .headerCon .assets {
		padding: 0 35rpx;
	}

	.my-account .wrapper .header .headerCon .middle {
		display: flex;
		// align-items: center;
		flex-direction: column;
		padding: 0 19px
	}

	.my-account .wrapper .header .headerCon .money {
		padding: 10px 0;
		font-size: 72rpx;
		color: #fff;
		font-family: 'Guildford Pro';
	}

	.my-account .wrapper .header .headerCon .recharge {
		font-size: 28rpx;
		width: 150rpx;
		height: 54rpx;
		border-radius: 27rpx;
		background-color: #fff9f8;
		text-align: center;
		line-height: 54rpx;
	}

	.my-account .wrapper .header .headerCon .cumulative {
		margin-top: 46rpx;
	}

	.my-account .wrapper .header .headerCon .cumulative .item {
		flex: 1;
		padding-left: 35rpx;
	}

	.my-account .wrapper .header .headerCon .cumulative .item .money {
		font-size: 48rpx;
		font-family: 'Guildford Pro';
		color: #fff;
		margin-top: 6rpx;
	}

	.my-account .wrapper .nav {
		height: 155rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.my-account .wrapper .nav .item {
		flex: 1;
		text-align: center;
		font-size: 26rpx;
		color: #999;
	}

	.my-account .wrapper .nav .item .pictrue {
		width: 44rpx;
		height: 44rpx;
		margin: 0 auto;
		margin-bottom: 20rpx;
	}

	.my-account .wrapper .nav .item .pictrue image {
		width: 100%;
		height: 100%;
	}

	.my-account .wrapper .advert {
		padding: 0 30rpx;
		margin-top: 30rpx;
	}

	.my-account .wrapper .advert .item {
		background-color: #fff6d1;
		width: 332rpx;
		height: 118rpx;
		border-radius: 10rpx;
		padding: 0 27rpx 0 25rpx;
		box-sizing: border-box;
		font-size: 24rpx;
		color: #e44609;
	}

	.my-account .wrapper .advert .item.on {
		background-color: #fff3f3;
		color: #e96868;
	}

	.my-account .wrapper .advert .item .pictrue {
		width: 78rpx;
		height: 78rpx;
	}

	.my-account .wrapper .advert .item .pictrue image {
		width: 100%;
		height: 100%;
	}

	.my-account .wrapper .advert .item .text .name {
		font-size: 30rpx;
		font-weight: bold;
		color: #f33c2b;
		margin-bottom: 7rpx;
	}

	.my-account .wrapper .advert .item.on .text .name {
		color: #f64051;
	}

	.my-account .wrapper .list {
		padding: 0 30rpx;
	}

	.my-account .wrapper .list .item {
		margin-top: 44rpx;
	}

	.my-account .wrapper .list .item .picTxt .iconfont {
		width: 82rpx;
		height: 82rpx;
		border-radius: 50%;
		background-image: linear-gradient(to right, #ff9389 0%, #f9776b 100%);
		text-align: center;
		line-height: 82rpx;
		color: #fff;
		font-size: 40rpx;
	}

	.my-account .wrapper .list .item .picTxt .iconfont.yellow {
		background-image: linear-gradient(to right, #ffccaa 0%, #fea060 100%);
	}

	.my-account .wrapper .list .item .picTxt .iconfont.green {
		background-image: linear-gradient(to right, #a1d67c 0%, #9dd074 100%);
	}

	.my-account .wrapper .list .item .picTxt {
		width: 428rpx;
		font-size: 30rpx;
		color: #282828;
	}

	.my-account .wrapper .list .item .picTxt .text {
		width: 317rpx;
	}

	.my-account .wrapper .list .item .picTxt .text .infor {
		font-size: 24rpx;
		color: #999;
		margin-top: 5rpx;
	}

	.my-account .wrapper .list .item .bnt {
		font-size: 26rpx;
		color: #282828;
		width: 156rpx;
		height: 52rpx;
		border: 1rpx solid #ddd;
		border-radius: 26rpx;
		text-align: center;
		line-height: 52rpx;
	}

	.my-account .wrapper .list .item .bnt.end {
		font-size: 26rpx;
		color: #aaa;
		background-color: #f2f2f2;
		border-color: #f2f2f2;
	}
</style>